// 初始化样式
* {margin: 0;padding: 0;outline: none;font-family: "微软雅黑";font-weight: normal;list-style:none;text-decoration:none;box-sizing: border-box;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);font-size: inherit;color: inherit;}
img{border:0;vertical-align:middle;max-width: 100%;} // 解决行高下图片间隙问题
// 基础变量配置
$base-size: 1px; // 基础单位，可以写1em,1rem,1rpx,1px根据具体项目需求 (目前只建议写px，其它单位等我有空调整完再更新)
$spacing-sizes: (0,5,10,15,20,25,30,35,40,45,50); // 内外边距的大小，单位基于base-size
$font-sizes: (0,10,12,13,14,15,16,18,20,24,28,32,36,40,44,48,52,56,60); // 字体大小，单位基于base-size
$width-height-sizes:(5,10,20,30,40,50,60,70,80,90,100,120,160,200,300,400,500,600); // 宽高大小，宽度单位基于base-size，高度单位px
$radius-sizes:(2,3,5,8,10,15,20,30,40); // 圆角大小，单位基于base-size
$rotate-sizes:(0,15,30,45,60,75,90,105,120,135,150,165,180,195,210,225,240,255,270,285,300,315,330,345,360);// 旋转角度
$container-width:(1000,1150,1200,1300,1400,1500,1600); // 主题区域宽度，单位px
$border-color: #ced4da; // 边框颜色
$scrollbar-color:#555555; // 滚动条颜色
$scrollbar-width:5; // 滚动条宽度
// 基础颜色配置
$colors: (
    "primary": #409EFF,
    "success": #67C23A,
    "warning": #E6A23C,
    "danger": #F56C6C,
    "info": #909399,
    "white": #ffffff,
    "black": #000000,
    "dark": #222222,
    "gray": #666666
);
// 遍历出字体和背景颜色
@each $colorKey, $color in $colors {
    .text-#{$colorKey} {
        color: $color;
    }
    .bg-#{$colorKey} {
        background-color: $color;
    }
}
// 内外边距前缀
$spacing-types: (
    mg: margin,
    pd: padding
);
// 方向上下左右
$spacing-direction: (
    t: top,
    r: right,
    b: bottom,
    l: left
);

// 内外边距整体
@each $size in $spacing-sizes {
  .pd#{$size} {
    padding: $size * $base-size;
  }
  .mg#{$size} {
    margin: $size * $base-size;
  }
}
// 遍历出所有内外边距：mgt(num),mgb(num),mgl(num),mgr(num) | pdt(num),pdb(num),pdl(num),pdr(num)
@each $typeKey, $type in $spacing-types {
    @each $dirKey, $dir in $spacing-direction {
        @each $size in $spacing-sizes {
            .#{$typeKey}#{$dirKey}#{$size} {
                #{$type}-#{$dir}: $size * $base-size;
            }
        }
    }
}
// 遍历出字体：fz(num)
@each $size in $font-sizes {
    .fz#{$size} {
        font-size: $size * $base-size;
    }
}
// 遍历出圆角：radius(num)
@each $size in $radius-sizes {
    .radius#{$size} {
        border-radius: $size * $base-size;
    }
};
// 旋转角度：rotate(num)
@each $size in $rotate-sizes {
    .rotate#{$size} {
        transform: rotate($size+deg);
    }
};
// 遍历宽高行高：w(num),h(num),lh(num)
@each $size in $width-height-sizes {
    .w#{$size} {
        width: $size * $base-size;
    }
    .h#{$size} {
        height: $size * $base-size;
    }
    .lh#{$size} {
        line-height: $size * $base-size;
    }         
};
// 边框
$border-type:(solid,dashed);
.noborder{border: none;}
.noborder::after{border: none;}
@each $type in $border-type {
    .border{border: $base-size $type $border-color;}
    .border-l{border-left: $base-size $type $border-color;}
    .border-r{border-right: $base-size $type $border-color;}
    .border-t{border-top: $base-size $type $border-color;}
    .border-b{border-bottom: $base-size $type $border-color;}
};
// 遍历主体宽度：container(num)
@each $size in $container-width {
    .container#{$size} {
        width: $size * $base-size;
        margin: 0 auto;
    }
};
// 通用辅助类
.fl{float: left}
.fr{float: right}
.fzb{font-weight: bold}
.circle{border-radius: 100%;}
.w-full{width: 100%!important;}
.w-auto{width: auto !important;}
.h-full{height: 100%!important;}
.h-auto{height: auto!important;}
.list-style-none{list-style:none}
.hide{display: none}
.block{display: block}
.inline{display: inline-block;*display: inline;*zoom:1}
.over-hidden{overflow: hidden;}
.border-box{box-sizing: border-box;}
.box-shadow{box-shadow: 0 2*$base-size 12*$base-size 0 rgba(0,0,0,.1);}
.pointer{cursor: pointer;}
.pointer-events-none{pointer-events: none;}
.select-none{user-select: none;}
.clear{*zoom: 1;&:after{content: "";display: block;width: 0;height: 0;clear: both;overflow: hidden}}
// 定位类
.fixed{position: fixed;}
.relative{position: relative}
.absolute{position: absolute;}
.mg-auto{margin: 0 auto;}
.trans-center{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.trans-center-x{position: absolute;left: 50%;transform: translateX(-50%,-50%);}
.trans-center-y{position: absolute;top: 50%;transform: translateY(-50%,-50%);}
// 文字类
.text-center{text-align: center;}
.text-right{text-align: right;}
.text-normal{font-weight: normal;font-style: normal;}
.text-break{word-break: break-all;}
.text-ellipsis{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.text-unline{text-decoration: underline}
// 按钮类
.button{display: inline-block;border: none;border-radius: 3px;padding: 0 20px;letter-spacing: 2px;}
// 表格类
.table-fixed{table-layout: fixed;}
.table{width: 100%;border-collapse:collapse;border-spacing:0;}
.table td{border: 1px solid #ddd;vertical-align: middle;padding: 10px 10px 9px;}
.table.striped tr:nth-child(odd) td {background-color: #f9f9f9;}
.table.hover tr:hover td{background-color: #f5f5f5;}
// 表单类
.form input,.form select{border: 1px solid $border-color;border-radius: 3px;text-indent: 10px;font-size: inherit;}
.form textarea{border: 1px solid $border-color;border-radius: 3px;padding: 6px 10px;font-size: inherit;}
.form label{display: inline-block;vertical-align: top;}
.form .form-block{display: block;}
.form .form-inline{display: inline-block;}
// flex布局
.flex{display: flex}
.flex-wrap{display: flex;flex-wrap: wrap}
.flex-nowrap{display: flex;flex-wrap: nowrap}
.flex-column{display: flex;flex-direction: column}
.flex-between{display: flex;justify-content: space-between}
.flex-around{display: flex;justify-content: space-around}
.flex-center{display: flex;justify-content: center}
.flex-shrink{display: flex;flex-shrink: 0;}
.justify-end{display: flex;justify-content: flex-end;}
.align-center{display: flex;align-items: center}
.align-top{display: flex;align-items: flex-start;}
.align-bottom{display: flex;align-items: flex-end;}
.self-top{display: flex;align-self: flex-start;}
.self-bottom{display: flex;align-self: flex-end;}
// 自定义滚动条
.scrollbar {
    &::-webkit-scrollbar
    {
        width:$scrollbar-width * $base-size;
    }
    &::-webkit-scrollbar-thumb
    {
        border-radius:10 * $base-size;
        background-color:$scrollbar-color;
    }
}